import React, { useEffect, useState } from 'react'
import connect from '../../utils/connect'
import Modal from './components/modal'
import List from './components/list'
import Title from './components/title'
import './index.less'

function Page({ demo1, getList, addList }) {
  const [modelVisible, setModelVisible] = useState(false)
  const { name, listData, loading } = demo1
  useEffect(() => { getList() }, [getList])
  console.log(arguments)

  const modalProps = {
    title: '添加配置信息',
    width: 800,
    cancelText: '取消',
    okText: '确认',
    item: {},
    visible: modelVisible,
    handleCancel() {
      setModelVisible(false)
    },
    handleOk(item) {
      setModelVisible(false)
      addList(item)
    }
  }

  const listProps = {
    loading: loading,
    data: listData
  }

  const titleProps = {
    name: name,
    onClick() {
      setModelVisible(true)
    }
  }

  return (
    <div className="demo-container">
      <Title {...titleProps} />
      <List {...listProps} />
      {modelVisible && <Modal {...modalProps} />}
    </div>
  )
}

export default connect(({ demo1 }) => ({ demo1 }), 'demo1')(Page)
